<html>

 <script>
	$(function () 
		{
          $('#dtp1').datepicker({ dateFormat: 'yy-mm-dd' });          
          $('.sel').select2();	  
		});
 </script> 
<style>
table {
  border-collapse: collapse;
  border-spacing: none;
  align:center;
  }
 
  tr th{
	border-top:0;
	border-left:0;
	border-right:0;
	border-bottom: 2px solid;	
	text-align:left;
  }

thead th {
  background-color: #F7BE81;
  font-size: 12px;
  font-family: sans-serif;
 border:none; 
  }

tbody td {
  font-size: 12px;  
 /* width : 150px;
  text-align: center;*/
}

tr th:first-child {
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;	  
}

tr td:last-child,
tr th:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.txttd{	
	padding-top: 12px;		
}
.txt{
	text-align: center;
	width:100px;
}
</style>


 <div ng-app="myApp"> 
 <h3>Payment Master <span ng-show="paynow.soc">( {{paynow.soc}} )</span></h3>
 <div style="color:red;" ng-show="mbdata.note">** {{mbdata.note}}<br/><br/></div>
 <form  method="post" action="">  
   <table> 
		
		<tr >			
			<th width="230px">* Society </th>			
			<th width="170px">* Room no </th>			
			<th width="200px">Customer name </th>			
			<th width="200px">Telephone number </th>
		</tr>
		
		
		<tbody>
		<tr height="100px">
			<td>
				<select style="width:200px,text-align: left;" ng-model="paynow.soc" class="sel" ng-change="getmbs()">
					<option value=''>-select a society-</option>
					<option ng-repeat="x in socdata">{{x}}</option>
				</select>		
			</td>		
			<td>
				<select style="width:140px" ng-model="paynow.member" class="sel" ng-change="getmbdata()" id="pmember" value="{{paynow.member}}">
					<option value=''>-select member-</option>
					<option ng-repeat="x in memroom">{{x.room}}</option>
				</select>
			</td>
			<td class="txttd"><input type="text" ng-model="paynow.cname" value="{{paynow.cname=mbdata.cname}}" class="txt" readonly/></td>
			<td class="txttd"><input type="text" ng-model="paynow.phone" value="{{paynow.phone=mbdata.phone}}" class="txt" readonly/></td>
		</tr>
		</tbody>		
		
		<tr >
			<th width="150px">Rate per month </th>			
			<th width="150px">Outstanding balance </th>			
			<th width="150px">* Paydate </th>			
			<th width="150px">* Amount </th>			
			<th width="250px">Notes </th>			
		</tr>
		<tbody>
		<tr height="100px">
		
		
			<td class="txttd"><input type="text" ng-model="paynow.rpm" value="{{paynow.rpm=mbdata.rpm}}" class="txt" readonly/></td>
			<td class="txttd"><input type="text" ng-model="paynow.bal" value="{{paynow.bal=mbdata.balance}}" class="txt" readonly/></td>
			<td class="txttd"><input type="text" ng-model="paynow.paydate" class="input-small" id="dtp1" value="{{paydate}}"/></td>			
			<td class="txttd"><input type="number" ng-model="paynow.amt" class="input-small" value="{{mbdata.rpm}}" id="p_amt"/></td>
			<td class="txttd"><input type="text" class="input-large" ng-model="paynow.note" ></td>			
		</tr>
		</tbody>
   </table>     
    <br> <button class="btn btn-success" ng-click="saverec(paynow)">save 
	<span ng-show="paynow.sms">and send sms</span></button>	
	<button class="btn" href="#/cancel/" ng-click="cancel()">Clear</button>
	<br> <br><input type="checkbox" ng-model="paynow.sms"> Check this box to send SMS<br>
   </div> <br>    	 
	  <table class="table table-striped">
		<thead>
		<tr>				
			<th>ID </th>			
			<th>Society </th>			
			<th>Room no </th>			
			<th>Customer name </th>			
			<th>Telephone number </th>			
			<!--<th>Rate per month </th>			
			<th>Outstanding balance </th>			-->
			<th>Paydate </th>			
			<th>Amount </th>			
			<th>Notes </th>
		</tr>
		</thead>
		<tbody>
		<tr ng-repeat="x in paymentdata | limitTo:5 | orderBy:'id':reverse=true">			
			<td>{{x.id}}</td>
			<td>{{x.sname}}</td>
			<td>{{x.RoomNumber}}</td>
			<td>{{x.cname}}</td>
			<td>{{x.TelNo}}</td>
			<!--<td>{{x.rpm}}</td>
			<td>{{x.balance}}</td>-->
			<td>{{x.paydate | date:'dd-MM-yyyy'}}</td>
			<td>{{x.payamount}}</td>
			<td>{{x.notes}}</td>
		</tr>
		</tbody>
	  </table>
  </body>
</html>
